
const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

exports.__esModule = true;
exports.default = void 0;

const _utils = require('../utils');

const _icon = _interopRequireDefault(require('../icon'));

const _createNamespace = (0, _utils.createNamespace)('notice-bar');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];

const _default = createComponent({
  props: {
    text: String,
    mode: String,
    color: String,
    leftIcon: String,
    wrapable: Boolean,
    background: String,
    scrollable: {
      type: Boolean,
      default: true,
    },
    delay: {
      type: [Number, String],
      default: 1,
    },
    speed: {
      type: [Number, String],
      default: 50,
    },
  },
  data: function data() {
    return {
      wrapWidth: 0,
      firstRound: true,
      duration: 0,
      offsetWidth: 0,
      showNoticeBar: true,
      animationClass: '',
    };
  },
  watch: {
    text: {
      handler: function handler() {
        this.start();
      },
      immediate: true,
    },
  },
  methods: {
    onClickIcon: function onClickIcon(event) {
      if (this.mode === 'closeable') {
        this.showNoticeBar = false;
        this.$emit('close', event);
      }
    },
    onAnimationEnd: function onAnimationEnd() {
      const _this = this;

      this.firstRound = false;
      this.$nextTick(() => {
        _this.duration = (_this.offsetWidth + _this.wrapWidth) / _this.speed;
        _this.animationClass = bem('play--infinite');

        _this.$emit('replay');
      });
    },
    reset: function reset() {
      this.wrapWidth = 0;
      this.offsetWidth = 0;
      this.animationClass = '';
      this.duration = 0;
    },
    start: function start() {
      const _this2 = this;

      this.$nextTick(() => {
        const _this2$$refs = _this2.$refs;
        const { wrap } = _this2$$refs;
        const { content } = _this2$$refs;

        if (!wrap || !content) {
          return;
        }

        const wrapWidth = wrap.getBoundingClientRect().width;
        const offsetWidth = content.getBoundingClientRect().width;

        if (_this2.scrollable && offsetWidth > wrapWidth) {
          _this2.wrapWidth = wrapWidth;
          _this2.offsetWidth = offsetWidth;
          _this2.duration = offsetWidth / _this2.speed;
          _this2.animationClass = bem('play');
        } else {
          _this2.reset();
        }
      });
    },
  },
  render: function render() {
    const _this3 = this;

    const h = arguments[0];
    const { slots } = this;
    const { mode } = this;
    const { leftIcon } = this;
    const { onClickIcon } = this;
    const barStyle = {
      color: this.color,
      background: this.background,
    };
    const contentStyle = {
      paddingLeft: this.firstRound ? 0 : `${this.wrapWidth}px`,
      animationDelay: `${this.firstRound ? this.delay : 0}s`,
      animationDuration: `${this.duration}s`,
    };

    function LeftIcon() {
      const slot = slots('left-icon');

      if (slot) {
        return slot;
      }

      if (leftIcon) {
        return h(_icon.default, {
          class: bem('left-icon'),
          attrs: {
            name: leftIcon,
          },
        });
      }
    }

    function RightIcon() {
      const slot = slots('right-icon');

      if (slot) {
        return slot;
      }

      let iconName;

      if (mode === 'closeable') {
        iconName = 'cross';
      } else if (mode === 'link') {
        iconName = 'arrow';
      }

      if (iconName) {
        return h(_icon.default, {
          class: bem('right-icon'),
          attrs: {
            name: iconName,
          },
          on: {
            click: onClickIcon,
          },
        });
      }
    }

    return h('div', {
      attrs: {
        role: 'alert',
      },
      directives: [{
        name: 'show',
        value: this.showNoticeBar,
      }],
      class: bem({
        wrapable: this.wrapable,
      }),
      style: barStyle,
      on: {
        click: function click(event) {
          _this3.$emit('click', event);
        },
      },
    }, [LeftIcon(), h('div', {
      ref: 'wrap',
      class: bem('wrap'),
      attrs: {
        role: 'marquee',
      },
    }, [h('div', {
      ref: 'content',
      class: [bem('content'), this.animationClass, {
        'van-ellipsis': !this.scrollable && !this.wrapable,
      }],
      style: contentStyle,
      on: {
        animationend: this.onAnimationEnd,
        webkitAnimationEnd: this.onAnimationEnd,
      },
    }, [this.slots() || this.text])]), RightIcon()]);
  },
});

exports.default = _default;
